<template>
  <div class="page">
    <div class="main">
      <el-card class="box-card" style="height:800px">
        <div slot="header" class="clearfix">
          <span>
            <navigation />
          </span>
        </div>
        <div class="list" id="taskScore">
          <el-scrollbar class="page-component__scroll" style="height:100%">
            <div style="height:700px;">
              <el-table
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                height="680px"
                :default-expand-all="false"
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren'
                }"
              >
                <el-table-column label="序号" width="100" prop="index" align="center"></el-table-column>
                <el-table-column prop="name" label="重点工作名称"></el-table-column>
                <el-table-column prop="number" label="全年目标任务量" width="120"></el-table-column>
                <!-- <el-table-column prop="departmentName" label="牵头部门">
                </el-table-column>-->
                <el-table-column prop="year" label="年度" width="100"></el-table-column>
                <el-table-column label="操作时间" width="180">
                  <template slot-scope="scope">{{ timestampToTimes(scope.row.updateTime) }}</template>
                </el-table-column>
                <el-table-column label="状态" width="200">
                  <template slot-scope="scope">{{ dataType(scope.row) }}</template>
                </el-table-column>
                <el-table-column prop="tscApplicatName" label="申请人" width="100"></el-table-column>
                <el-table-column label="操作">
                  <template
                    slot-scope="scope"
                    v-if="!scope.row.children || scope.row.children.length == 0"
                  >
                    <el-button @click="setCheck(scope.row)" type="text">任务进度查看</el-button>
                    <!-- <el-button
                      type="text"
                      @click="handFileList(scope.row)"
                      v-if="scope.row.isDisplay == true"
                      >附件列表</el-button
                    >-->
                    <el-button type="text" @click="auditData(scope.row)">申请审核</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </div>

    <el-dialog title="进度填报" center :visible.sync="dialogschedule" width="30%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="完成年度">
            <div class="parentyear">
              <span style="width:140px;">
                <el-date-picker
                  v-model="form.year"
                  type="year"
                  size="small"
                  placeholder="选择年"
                  style="width:100%"
                  value-format="yyyy"
                ></el-date-picker>
              </span>
            </div>
          </el-form-item>
          <el-form-item label="完成季度">
            <el-select v-model="form.quarter" size="medium" placeholder="请选择" style="width:100%">
              <el-option
                v-for="(item, index) in quarterList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进度分值">
            <el-input type="text" v-model="form.completionDegree"></el-input>
          </el-form-item>
          <el-form-item label="进度描述">
            <el-input type="textarea" :rows="2" v-model="form.completionDegree"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="2" v-model="form.remarks"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogschedule = false">取 消</el-button>
        <el-button type="primary" @click="dataGrade()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择 -->
    <el-dialog title="申请审核" :visible.sync="dialogVisible" width="30%" center>
      <div style="text-align: center;">
        <b>选择季度:</b>
        <el-select class="userIntSize" v-model="allNumber" clearable @change="cehngeQuarter()">
          <el-option
            v-for="(item, index) in quarterList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setMonthly()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogGrade: false,
      dialogschedule: false,
      options: [],
      fileStrList: [],
      value: "",
      value1: true,
      input: "",
      tableData: [],
      tableDataboy: [],
      total: 0,
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      textarea: "",
      dialogFormVisible: false,
      form: {
        subtasksId: "",
        year: "",
        quarter: "",
        remarks: "",
        completionDegree: "",
      },
      objCurr: {
        type: true,
        id: "",
        taskId: "",
        year: "",
        time: "",
        score: "",
      },
      // 附件上传模块
      dutyFrom: {
        id: "",
        taskId: "",
        year: "",
        quarter: "",
        file: [],
        fileType: "",
      },
      fileList: [],
      fileTableData: [],
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" },
      ],
      input2: "",
      taskId: "",
      fileTypeList: [],
      currVal: "",
      allNumber: "",
      quarterState: 0,
    };
  },
  mounted() {
    this.taskId = this.$route.query.taskId;
    this.getListByPage();
    this.getFileType();
  },
  // 计算属性
  computed: {},
  methods: {
    // 时间转换
    timestampToTimes(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear();
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // return Y + M + D;
      let _time = `${Y}年${M}月${D}日`;
      return _time;
    },
    // 实时观察第几季度
    cehngeQuarter() {
      this.$axios
        .post(`/distribution/getstate`, {
          quarter: this.allNumber,
          id: this.currVal.id,
          taskId: this.currVal.id,
        })
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data[0].state);
            this.quarterState = res.data[0].state;
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击确认审核弹窗
    setMonthly() {
      if (this.allNumber == "") {
        this.$message.error("请选择季度");
        return;
      }
      let _obj = {
        taskId: this.currVal.id,
        quarter: this.allNumber,
        status: 1,
      };
      console.log(this.quarterState);
      if (this.quarterState == 1 || this.quarterState == 2) {
        this.$message.error("季度处于“审核中”或“通过”，无法提交!");
        return;
      }
      this.$axios
        .post(`/distribution/auditingNwe`, _obj, 2)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.dialogVisible = false;
            this.$message({
              message: "已成功提交审核！",
              type: "success",
            });
            this.getListByPage();
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击审核按钮
    auditData(val) {
      this.currVal = val;
      console.log(this.currVal);
      // this.allNumberId = val.id;
      this.allNumber = "";
      this.dialogVisible = true;
    },
    // 搜索
    fileLists(arr) {
      let str = arr.split("/");
      return str.pop();
    },
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
    transLate(val) {
      let text = "";
      switch (val) {
        case 1:
          text = "第一季度";
          break;
        case 2:
          text = "第二季度";
          break;
        case 3:
          text = "第三季度";
          break;
        default:
          text = "第四季度";
      }
      return text;
    },
    handleLook(row) {
      this.$router.push("/unitScore");
    },
    changeYear(val) {
      this.dutyFrom.year = val.toLocaleDateString();
    },
    successFile(response, file, fileList) {
      if (response.code == 200) {
        this.fileList = fileList;
        console.log(this.fileList);
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
        this.dutyFrom.file.push(response.data); //获取上传文件名
      }
    },
    handleDealFileRemove(file, fileList) {
      this.fileList = fileList;
      this.fileName = "";
    },

    closeDialog() {
      this.dutyFrom = {
        year: "",
        quarter: "",
        file: "",
        taskId: "",
        id: "",
        fileType: "",
      };
    },
    // 上传附件列表
    handFileList(row) {
      console.log(row);
      this.dutyFrom.taskId = row.id;
      this.getfileList();
      this.dialogFormVisible = true;
    },
    // 状态
    dataType(row) {
      let _text = "";
      console.log(row);
      if (row.oneQuarterDegreeStatus == 1) {
        return (_text = "第一季度待审核");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度待审核");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度待审核");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度待审核");
      }

      if (row.oneQuarterDegreeStatus == -1) {
        return (_text = "第一季度驳回");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度驳回");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度驳回");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度驳回");
      }

      if (row.oneQuarterDegreeStatus == 2) {
        return (_text = "第一季度通过");
      } else if (row.twoQuarterDegreeStatus == 1) {
        return (_text = "第二季度通过");
      } else if (row.threeQuarterDegreeStatus == 1) {
        return (_text = "第三季度通过");
      } else if (row.allDegreeStatus == 1) {
        return (_text = "第四季度通过");
      }
    },
    // 删除
    deleteCheck(val) {
      console.log(val);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(`/distribution/remove`, {
              id: val.id,
            })
            .then((res) => {
              if (res.code == 200) {
                console.log(res);
                this.$message({
                  message: "数据更新成功",
                  type: "success",
                });

                this.getListByPage();
              }
            })
            .catch((err) => {
              console.log(err);
            });

          // this.$message({
          //   type: "success",
          //   message: "删除成功!"
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增指标
    addTask(val) {
      this.form.subtasksId = val.id;
      this.dialogschedule = true;
    },
    setCheck(val) {
      console.log(val);
      this.$router.push({
        path: "/targetListboy",
        query: {
          id: val.id,
          departmentName: val.departmentName,
          name: val.name,
        },
      });
    },
    setGrade(val) {
      console.log(val);
      for (const key in this.objCurr) {
        this.objCurr[key] = "";
      }
      this.objCurr.taskId = val.id;
      this.objCurr.type = true;
      this.dialogGrade = true;
    },
    // 点击列表打分确认按钮
    dataGrade() {
      let _this = this.form;
      if (
        _this.year == "" ||
        _this.quarter == "" ||
        _this.completionDegree == ""
      ) {
        this.$message.error("请用户填填完输入框");
        return;
      }

      // if (!/(^[1-9]\d*$)/.test(_this.completionDegree)) {
      //   this.$message.error("请用户在分数内写入1-100的正整数");
      //   return;
      // }
      this.$axios
        .post(`/subtaskDegree/add`, this.form)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.$message({
              message: "数据更新成功",
              type: "success",
            });
            this.dialogschedule = false;
            // this.getListByPage();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    dataTotal(val) {
      this.pageNum = val;
    },
    // 表格数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表查看按钮
    routerPath(val) {
      // this.$router.push({
      //   path: "/unitboyScore",
      //   query: { subtasksId: val.subtasksId }
      // });
    },
    // 编写备注
    dataRemark() {
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      this.$axios
        .post(`/task/getList`)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
            let _taskId = localStorage.getItem("taskId");
            this.tableData.forEach((item, index) => {
              if (_taskId == "null" || _taskId == "undefined") {
                item.isDisplay = true;
                if (item.children || scope.row.children.length != 0) {
                  item.children.forEach((i, index2) => {
                    i.isDisplay = true;
                    i.index = `${index + 1}.${index2 + 1}`;
                  });
                }
                item.index = index + 1;
              } else {
                item.index = index + 1;
                if (item.id == _taskId) {
                  item.isDisplay = true;
                } else {
                  item.isDisplay = false;
                }
              }
            });

            this.tableDataboy = [];
            this.tableDataboy = this.tableData.filter(function (
              element,
              index,
              self
            ) {
              return self.findIndex((el) => el.id == element.id) === index;
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取文件类别
    getFileType() {
      this.$axios
        .post("fileLibTypeController/getList")
        .then((res) => {
          if (res.code == 200) {
            this.fileTypeList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fileChange(val) {
      this.$axios
        .post("fileController/getList", { type: val }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.fileStrList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.searchLeft {
  float: left;
  width: 400px;
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.striping > b {
  font-weight: 500;
  font-size: 14px;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.page-component__scroll {
  height: 100%;
}
.list {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.laypage {
  width: 100%;
  height: 60px;
  position: relative;
  top: -60px;
  text-align: right;
}
</style>
<style>
#taskScore .el-scrollbar__wrap {
  overflow: visible;
  overflow-y: scroll;
}
</style>
